<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-08 09:23:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-09 10:44:29
 * @FilePath: /hr_new_vue3/src/views/Management/Home/InternshipManagement/Summary/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 实习流程-步骤三-实习自评 -->
<template>
  <div class="step3">
    <a-form ref="formRef" :model="formData.data" auto-label-width>
      <section>
        <div class="title">
          <span>实习总结</span>
        </div>
        <div>
          <a-form-item field="userName" label="实习总结填写" show-colon>
            <a-textarea
              v-model="formData.data.summarize"
              :auto-size="{
                minRows: 4
              }"
            />
          </a-form-item>
          <a-form-item field="file" label="文件附件" show-colon>
            <UploadFile
              class="file"
              ref="uploadRef"
              :fileList="formData.data.files"
              :draggable="false"
              tip="请上传JPG、JPEG、PNG、DOC、DOCX、PDF、EXCEL、XLSX、XLS格式"
              :fileTypeList="fileTypeList"
              :userId="userId"
              :type="2"
            />
          </a-form-item>
        </div>
      </section>
      <section>
        <div class="title">
          <span>指标评分明细</span>
        </div>
        <div>
          <a-form-item hide-label no-style>
            <a-table :data="formData?.data?.indexArr" :pagination="false">
              <template #columns>
                <a-table-column :width="80">
                  <template #title> 序号 </template>
                  <template #cell="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </template>
                </a-table-column>
                <a-table-column :width="200" data-index="name" title="指标名称">
                </a-table-column>
                <a-table-column
                  :width="200"
                  data-index="remark"
                  title="指标描述"
                >
                </a-table-column>
                <a-table-column
                  :width="200"
                  data-index=""
                  title="评分标准"
                  :headerCellStyle="{
                    height: '30px'
                  }"
                >
                  <a-table-column
                    :width="200"
                    data-index="excellent"
                    title="优秀A"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="good"
                    title="良好B"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="qualified"
                    title="合格C"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="range"
                    title="较差D"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                  <a-table-column
                    :width="200"
                    data-index="wrong"
                    title="差E"
                    :headerCellStyle="{
                      height: '30px'
                    }"
                  >
                  </a-table-column>
                </a-table-column>
                <a-table-column
                  :width="100"
                  data-index="upperLimit"
                  title="评分上限"
                >
                  <template #cell>
                    {{
                      formData.data.upperLimitScore
                        ? formData.data.upperLimitScore
                        : '无限'
                    }}
                  </template>
                </a-table-column>
                <a-table-column :width="200" data-index="score" title="评分">
                  <template #title>
                    <span class="star">评分</span>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item
                      hide-label
                      :field="`indexArr.${rowIndex}.score`"
                      :rules="[
                        {
                          required: true,
                          message: '请输入'
                        }
                      ]"
                    >
                      <a-input-number
                        :min="0"
                        :max="
                          formData.data.upperLimitScore
                            ? formData.data.upperLimitScore
                            : ''
                        "
                        v-model="record.score"
                        hide-button
                      ></a-input-number>
                    </a-form-item>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-form-item>
        </div>
      </section>
    </a-form>
    <footer>
      <a-space>
        <a-button type="outline" class="btn" @click="save">保存</a-button>
        <a-button type="primary" class="btn" @click="submit">提交评分</a-button>
      </a-space>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import {
  PostInternshipEvaluationHuman,
  PutInternshipEvaluationHuman,
  GetInternshipEvaluationHumanDetail,
  DelInternshipEvaluationHumanDetail,
  ChangeInternshipEvaluationHumanStatus
} from '@/apis/management/human/humanChange/internship';

const props = withDefaults(
  // 参数说明
  defineProps<{
    userId: number; // 实习人员id
    isEdit: boolean; // 是否可以编辑
  }>(),
  {
    isEdit: true
  }
);

let formRef = ref();
let uploadRef = ref();
const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.doc',
  '.docx',
  '.pdf',
  '.xls',
  '.xlsx'
];

const formData = reactive({
  data: {
    summarize: '', // 总结
    files: [], // 文件上传，
    indexArr: [] // 指标
  }
});
const getData = async () => {
  try {
    const [internshipEvaluationRes] = await Promise.all([
      GetInternshipEvaluationHumanDetail({
        id: props.userId
      })
    ]);
    formData.data = internshipEvaluationRes;
    //
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 保存
const save = async () => {
  try {
    await uploadRef.value.submit();
    console.log('====================================');
    formData.data.files = uploadRef.value.uploadList.map((ele: any) => {
      return {
        fileName: ele.response.useFileName,
        fileUrl: ele.response.DownloadPath,
        id: ele.response.id
      };
    });
    console.log(formData.data, uploadRef.value.uploadList);
    console.log('====================================');
    await PutInternshipEvaluationHuman(formData.data);
    Message.success('保存成功!');
  } catch (error: unknown) {
    console.log(error);
  }
};

// 提交评分
const submit = async () => {
  try {
    if (await formRef.value?.validate()) {
      Message.error('请填写必填信息！');
      return;
    }
    await PutInternshipEvaluationHuman(formData.data);
    await ChangeInternshipEvaluationHumanStatus({
      id: props.userId,
      status: 3 // 待他评传3
    });
    Message.success('提交成功!');
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.step3 {
  .title {
    min-height: 30px;
    font-weight: 600;
    font-size: 14px;
    background: #f5f7fb;
    padding: 5px 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      margin: 0 5px;
      display: inline-block;
      width: 3px;
      height: 12px;
      border-left: #409efe solid 1px;
      background: #409efe;
    }
    .title-right {
      flex: 1;
      text-align: right;
    }
  }

  .star::before {
    content: '*';
    color: red;
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
</style>
